<template>
	<view>
		<u-tabbar :value="name" @change="change" activeColor="#000000" inactiveColor="#999999"
			:safeAreaInsetBottom="false">
			<u-tabbar-item :name="item.text" :text="item.text" v-for="(item,index) in list" :key="index">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="getStaticFilePath(item.selectedIconPath)">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="getStaticFilePath(item.iconPath)"></image>
			</u-tabbar-item>

		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "cg-tabbar",
		props: {
			name: {
				default: '首页',
				type: String
			}
		},
		data() {
			return {
				
				list: [{
						"pagePath": "/pages/index/index",
						"iconPath": "tabbar/home.png",
						"selectedIconPath": "tabbar/home-select.png",
						"text": "首页"
					}, {
						"pagePath": "/pages/order/index",
						"iconPath": "tabbar/dingdan.png",
						"selectedIconPath": "tabbar/dingdan-select.png",
						"text": "全部订单"
					},
					{
						"pagePath": "/pages/distribution/index",
						"iconPath": "tabbar/fenxiao.png",
						"selectedIconPath": "tabbar/fenxiao-select.png",
						"text": "推广中心"
					},
					{
						"pagePath": "/pages/personal/index",
						"iconPath": "tabbar/gerenzhongxin.png",
						"selectedIconPath": "tabbar/gerenzhongxin-select.png",
						"text": "个人中心"
					}
				]
			};
		},
		methods: {
			change(name) {
				// this.name = name;
				const route = this.list.find(item => {
					return item.text === name
				})
				this.$CGRouter.switchTab(route.pagePath);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon {
		width: 44rpx;
		height: 44rpx;
	}
</style>